<template>
    <div class="home">
      <mt-header fixed class="head" title="">
        <router-link to="" slot="left">
          <mt-button icon="">锦曼 JinMan</mt-button>
        </router-link>
        <router-link to="" slot="left">
          <mt-button contentEditable="true" class="search pr" icon="">请输入您要查找的旗袍 <span class="sea iconfont iconsousuo pa"></span></mt-button>
        </router-link>
        <router-link to="/groupcar" slot="right" icon="">
          <mt-button class="iconfont buy">&#xe600;</mt-button>
        </router-link>
      </mt-header>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide><a href="#/goodsdetails"><img src="../../assets/img/banner1.jpg" /></a></swiper-slide>
        <swiper-slide><a href="#/goodsdetails"><img src="../../assets/img/banner2.jpg" /></a></swiper-slide>
        <swiper-slide><a href="#/goodsdetails"><img src="../../assets/img/banner3.jpg" /></a></swiper-slide>
        <!-- 分页器 -->
        <div class="swiper-scrollbar"  slot="pagination"></div>
      </swiper>
      <div class="imglist1">
        <img src="../../assets/img/subnavIndex1.png" /><img src="../../assets/img/subnavIndex2.png" /><img src="../../assets/img/subnavIndex3.png" /><img src="../../assets/img/subnavIndex4.png" />
      </div>
      <div class="imglist1-1"><img src="../../assets/img/tit1.jpg" /></div>
      <dl class="imglist2 clearfix">
        <dd class="list pr">
          <img src="../../assets/img/product1.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product2.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product3.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
      </dl>
      <div class="imglist1-1"><img src="../../assets/img/tit2.jpg" /></div>
      <dl class="imglist2 clearfix">
        <dd class="list pr">
          <img src="../../assets/img/product3.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product4.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product5.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
      </dl>
      <div class="imglist1-1"><img src="../../assets/img/tit3.jpg" /></div>
      <dl class="imglist2 clearfix">
        <dd class="list pr">
          <img src="../../assets/img/product7.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product8.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product9.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
      </dl>
      <div class="imglist1-1"><img src="../../assets/img/tit4.jpg" /></div>
      <dl class="imglist2 clearfix">
        <dd class="list pr">
          <img src="../../assets/img/product10.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product11.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
        <dd class="list pr">
          <img src="../../assets/img/product12.jpg" />
          <p>夹棉印花毛领旗袍</p>
          <span class="money">￥328.00</span><span class="love iconfont iconzan1">212</span>
        </dd>
      </dl>
      <div class="last"><img src="../../assets/img/banner5.jpg" /><img src="../../assets/img/banner4.png" /></div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import { Header } from 'mint-ui';
  Vue.component(Header.name, Header);
    export default {
        data(){
          return{
            swiperOption: {
              loop:true,
              autoplay: {
                delay: 3000,
                stopOnLastSlide: true,
                disableOnInteraction: false,
              }, //自动播放
              pagination: {
                el: '.swiper-scrollbar', //滚动条
              }
            }
          }
        },
        components:{
        },
        name: "home"
    }
</script>

<style scoped lang="stylus">
  .home
    margin-bottom: 2.5rem
    .last
      padding-bottom .25rem
      img
        width: 100%
        vertical-align top
    .imglist2
      display flex
      justify-content space-around
      margin: 0 auto
      width: 95%
      .list
        width: 32.5%
        color: #ffffff
        span.love
          -webkit-transform: scale(0.5);
          -webkit-transform-origin: top right;
          float: right;
          color: #f6e0c2;
          position: absolute;
          bottom: 0;
          right: 0;
        span
          display: inline-block;
          vertical-align: top;
          font-size: 18px;
          height: 18px;
          line-height: 18px;
          -webkit-transform: scale(0.5);
          -webkit-transform-origin: top left;
          color: #f97104;
        p
          display: block;
          text-align: justify;
          font-size: 12px;
          line-height: 20px;
          height: 20px;
          color: #fffefe;
        img
          width: 100%
          vertical-align top
    .imglist1-1
      img
        margin-bottom: .6rem
        vertical-align top
        width: 95%
        margin-left: 2.5%
    .imglist1
      margin: 0 auto
      width: 95%
      display flex
      justify-content space-between
      margin-bottom: .6rem
      img
        width: 22%
        height: 6rem
    .swiper
      margin-top: 2rem
      img
        vertical-align top
        width: 100%
        height: 100%
        margin-bottom: .8rem
    .head
      z-index 2
      display flex
      background: #581513
      .search
        color: #f6e0c2
        text-indent -1rem
        margin-left: 20%
        height: 1.2rem
        width: 8rem
        font-size: .6rem
        border: 1px solid #f6e0c2;
        background: transparent
        .sea
          right: .1rem
          -webkit-transform: translateY(-50%)
          -moz-transform: translateY(-50%)
          -ms-transform: translateY(-50%)
          -o-transform: translateY(-50%)
          transform: translateY(-50%)
          top: 50%
</style>
